<template>
	<view class="content">
		<view class="content-title"></view>
		<view class="content-letter">
			<view class="content-letter-top">{{`2025年春节保障日报(${today3})`}}</view>
			<view class="content-letter-bg">
				<view class="content-letter-bg-bg">
					<view class="bg-title">
						<view class="bg-title-icon"></view>
						<view class="bg-title-font">各位领导：您好！</view>
					</view>
					<view class="bg-content">{{jksyData.f_syzj}}</view>
				</view>
			</view>
			<!-- 时间滚动 -->
			<!-- <view class="content-letter-bg-carousel">
				<view class="bg">
					<view
						:class="['carousel-item' ,today == item.id?'carousel-item1':'' ,item.id>today1?'carousel-item2':'']"
						v-for="item in timeList" @click="changeDate(item.id)">
						<view class="carousel-item-name">
							{{item.name}}
						</view>
						<view class="carousel-item-value">
							{{item.value}}
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<view class="content_nr">
			<!-- 重点场景 -->
			<view class="keyScenes">
				<img src="@/static/images/summaryReport/bg/bg5.png" class="keyScenes_topBg" alt="">
				<view class="keyScenes_nav">
					<view :class="['keyScenes_nav_item', keyScenesAction == index?'keyScenes_active':'']"
						@click="onkeyScenes(item,index)" v-for="(item,index) in keyScenesList" :key="index">
						{{item}}
					</view>
				</view>
				<view v-if="keyScenesAction == '0'" class="keyScenes_nr1">
					<!-- 01 -->
					<!-- 	<view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center" style="margin-left: 60rpx;">{{myxgData.f_sjmyzj}}</view>
						<view class="business-one-right"></view>
					</view> -->
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									省际漫入用户数
								</view>
								<view class="draw-left-bottom" v-if="myqsData.length > 0">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myqsData[myqsData.length-1].f_sjmryhs}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_sjmryhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmryhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmryhsjrc != 0? (myxgData.f_sjmryhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
								<view class="draw-right-daily" >
									<view
										:class="[myxgData.f_sjmryhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmryhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmryhstb != 0 ? myxgData.f_sjmryhstb +'%' : ''}}
									</view>
									T-1 同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:350rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef1" style="width:700rpx; height:350rpx"></l-echart>
					</view>
					<view class="keyScenes_text">
						{{myxgData.f_sjmrzj}}
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							漫入客户来源地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_sjmrdymsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmrdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_sjmrdemsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmrdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_sjmrdsmsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmrdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									省际漫出用户数
								</view>
								<view class="draw-left-bottom" v-if="myqsData.length > 0">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myqsData[myqsData.length-1 ].f_sjmcyhs}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_sjmcyhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmcyhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmcyhsjrc != 0? (myxgData.f_sjmcyhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
									<view class="draw-right-daily" >
									<view
										:class="[myxgData.f_sjmcyhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_sjmcyhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_sjmcyhstb != 0 ? myxgData.f_sjmcyhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:350rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef2" style="width:700rpx; height:350rpx"></l-echart>
					</view>
					<!-- <view class="keyScenes_text">
										省际漫游高峰出现在初三，漫游用户数达到xxxxx万
									</view> -->
					<view class="keyScenes_top3" style="margin-top: 50rpx;">
						<view class="keyScenes_top3_title">
							漫出客户来源地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_sjmcdymsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmcdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_sjmcdemsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmcdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_sjmcdsmsf}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_sjmcdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="keyScenesAction == '1'" class="keyScenes_nr1">
					<!-- 02 -->
					<!-- <view class="business-one">
						<view class="business-one-left"></view>
						<view class="business-one-center" style="margin-left: 60rpx;">{{myxgData.f_gjmyzj}}</view>
						<view class="business-one-right"></view>
					</view> -->
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									国际及港澳台地区<br />
									漫入用户数
								</view>
								<view class="draw-left-bottom" v-if="myqsData.length > 0">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myqsData[myqsData.length - 1].f_gjgatdqmryhs}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmryhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmryhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmryhsjrc != 0? (myxgData.f_gjjgatdqmryhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
									<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmryhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmryhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmryhstb != 0 ? myxgData.f_gjjgatdqmryhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:350rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef3" style="width:700rpx; height:350rpx"></l-echart>
					</view>
					<view class="keyScenes_text">
						{{myxgData.f_gjjgatdqmrzj}}
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							漫入客户来源地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_gjjgatdqmrdymgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmrdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_gjjgatdqmrdemgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmrdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_gjjgatdqmrdsmgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmrdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
					<!-- 同比/较日常 -->
					<view class="compare">
						<view class="draw">
							<view class="draw-left">
								<view class="draw-left-top">
									国际及港澳台地区<br />
									漫出用户数
								</view>
								<view class="draw-left-bottom" v-if="myqsData.length > 0">
									<view class="draw-left-bottom-icon"></view>
									<view class="draw-left-bottom-font">{{myqsData[myqsData.length - 1].f_gjgatdqmcyhs}}</view>
									<view class="draw-left-bottom-unit">万</view>
								</view>
							</view>
							<view class="draw-right">
								<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmcyhsjrc>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmcyhsjrc==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmcyhsjrc != 0? (myxgData.f_gjjgatdqmcyhsjrc+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									较日常
								</view>
									<view class="draw-right-daily">
									<view
										:class="[myxgData.f_gjjgatdqmcyhstb>0?'draw-right-icon1':'draw-right-icon2',myxgData.f_gjjgatdqmcyhstb==0? 'draw-right-icon3':'']">
										{{myxgData.f_gjjgatdqmcyhstb != 0 ? myxgData.f_gjjgatdqmcyhstb +'%' : ''}}
									</view>
									同比
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view style="width:700rpx; height:350rpx;margin-top: 10rpx;">
						<l-echart ref="echartRef4" style="width:700rpx; height:350rpx"></l-echart>
					</view>
					<view class="keyScenes_top3" style="margin-top: 50rpx;">
						<view class="keyScenes_top3_title">
							漫出客户去向地TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_gjjgatdqmcdymgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmcdymyhs}}万
								</view>
								<view class="nrItem_jdt"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_gjjgatdqmcdemgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmcdemyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 104rpx;"></view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" style="width: 180rpx;">
									{{myxgData.f_gjjgatdqmcdsmgj}}
								</view>
								<view class="nrItem_num">
									{{myxgData.f_gjjgatdqmcdsmyhs}}万
								</view>
								<view class="nrItem_jdt" style="width: 54rpx;"></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="keyScenesAction == '2'" class="keyScenes_nr3">
					<!-- 03 -->
					<view class="business-one">
						<view class="business-one-left keyScenes3bg"></view>
						<view class="business-one-center" style="width: 530rpx;">{{zbData.f_zbqyzj}}</view>
						<view class="business-one-right"></view>
					</view>
					<!-- 高铁 -->
					<img src="@/static/images/summaryReport/banner1.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							高铁5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb1"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">10</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb2"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">100</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gt5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gt5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gt5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							高铁4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb1_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb2_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">15</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gt4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gt4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gt4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gt4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gt4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门高铁TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgtd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name">
									{{zbData.f_rmgtd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgtd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 高速 -->
					<img src="@/static/images/summaryReport/banner2.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							高速5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb3"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">15</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">200</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gs5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gs5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gs5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							高速4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb3_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb4_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_gs4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_gs4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_gs4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_gs4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_gs4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门高速TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgsd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name">
									{{zbData.f_rmgsd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmgsd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 景区 -->
					<img src="@/static/images/summaryReport/banner3.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							景区5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb5"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">15</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb6"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">300</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jq5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jq5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jq5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							景区4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb5_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb6_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jq4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jq4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jq4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jq4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jq4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门景区TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjqd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjqd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjqd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 交通枢纽 -->
					<img src="@/static/images/summaryReport/banner4.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							交通枢纽5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb7"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">15</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb8"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">400</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jtsn5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jtsn5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jtsn5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view">
						<view class="gt_logo">
							交通枢纽4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb7_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb8_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_jtsn4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_jtsn4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_jtsn4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_jtsn4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_jtsn4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							热门交通枢纽TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name">
									{{zbData.f_rmjtsnd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjtsnd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_rmjtsnd3}}
								</view>
							</view>
						</view>
					</view>
					<!-- 农村 -->
					<img src="@/static/images/summaryReport/banner5.png" class="banner_gt" alt="">
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							农村5G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb9"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">10</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">5G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc5gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb10"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">100</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc5gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_nc5glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc5glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_nc5glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_nc5glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc5glljrc}}%
							</view>
						</view>
					</view>
					<view class="gaotie_view" style="margin-bottom: 20rpx;">
						<view class="gt_logo">
							农村4G
						</view>
						<view class="proportion1">
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb9_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #0CB480;">3</span>
								</view>
								<view class="font">用户上行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">4G流量</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc4gll}}TB</span>
								</view>
							</view>
							<view class="proportion1-item">
								<view style="display: flex;align-items: self-end;">
									<l-echart ref="chartRefYb10_4"
										style="width:186rpx; height:180rpx;margin-left: 46rpx;"></l-echart>
										<span class="maxZ" style="color: #007AFF;">30</span>
								</view>
								<view class="font">用户下行体验速率</view>
								<view class="keyScenes_nr3_title_num">
									<span class="keyScenes_nr3_title">无线接通率</span>
									<span class="keyScenes_nr3_num">{{zbData.f_nc4gwxjtl}}%</span>
								</view>
							</view>
						</view>
						<view class="jrcView">
							<!-- 上涨 -->
							<view class="jsc_sz" v-if="zbData.f_nc4glljrc > 0">
								<img src="@/static/images/summaryReport/icon/icon10-1.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc4glljrc}}%
							</view>
							<!-- 持平 -->
							<view class="jsc_cp" style="color: #1B9CFF;" v-if="zbData.f_nc4glljrc == 0">
								<img src="@/static/images/summaryReport/icon/icon10-5.png" class="jrc_icon" alt="">
								较日常持平
							</view>
							<!-- 下降 -->
							<view class="jsc_xj" style="color: #0CB480;" v-if="zbData.f_nc4glljrc < 0">
								<img src="@/static/images/summaryReport/icon/icon10-4.png" class="jrc_icon" alt="">
								较日常 {{zbData.f_nc4glljrc}}%
							</view>
						</view>
					</view>
					<view class="keyScenes_top3">
						<view class="keyScenes_top3_title">
							高人气行政村TOP3
						</view>
						<img src="@/static/images/summaryReport/pic7.png" class="keyScenes_top3_icon" alt="">
						<view class="keyScenes_top3_nr">
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">1</view>
								<view class="nrItem_name" >
									{{zbData.f_grqxzcd1}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">2</view>
								<view class="nrItem_name" >
									{{zbData.f_grqxzcd2}}
								</view>
							</view>
							<view class="keyScenes_top3_nrItem">
								<view class="nrItem_index">3</view>
								<view class="nrItem_name" >
									{{zbData.f_grqxzcd3}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户数情况 -->
		<view class="serSituation">
			<view class="serSituation-theme">
				<view class="serSituation-theme-tilie"></view>
				<!-- 总用户数 -->
				<view class="total-users">
					<view class="total-users-theme">
						<view class="total-users-theme-top">手机用户数</view>
						<view class="total-users-theme-bottom">
							<view class="theme-bottom-left">
								<view class="icon"></view>
								<view class="text">{{yhsqkData.f_sjyhs}}<i>万</i></view>
							</view>
							<view class="theme-bottom-right">
								<view class="theme-bottom-right-top">
									<view :class="[yhsqkData.f_sjyhsrcb > 0 ? 'icon' : 'icon1']"></view>
									<view class="text">{{`日常比 ${yhsqkData.f_sjyhsrcb}%`}}</view>
								</view>
								<view class="theme-bottom-right-top" style="margin-top: 10rpx;">
									<view :class="[yhsqkData.f_sjyhstb > 0 ? 'icon' : 'icon1']"></view>
									<view class="text">{{`同比 ${yhsqkData.f_sjyhstb}%`}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 5G/VOLTE -->
				<view class="total-5G-VOLTE">
					<view class="total-tiem">
						<view class="total-tiem-title">5G用户数</view>
						<view class="total-tiem-icon">
							<view class="icon0"></view>
							<view class="text">{{yhsqkData.f_5gyhs}}<i>万</i></view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkData.f_5gyhsrcb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`日常比 ${yhsqkData.f_5gyhsrcb}%`}}</view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkData.f_5gyhstb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`同比 ${yhsqkData.f_5gyhstb}%`}}</view>
						</view>
					</view>
					<view class="total-tiem">
						<view class="total-tiem-title">VOLTE用户数</view>
						<view class="total-tiem-icon">
							<view class="icon1"></view>
							<view class="text">{{yhsqkData.f_volteyhs}}<i>万</i></view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkData.f_volteyhsrcb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`日常比 ${yhsqkData.f_volteyhsrcb}%`}}</view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkData.f_volteyhstb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`同比 ${yhsqkData.f_volteyhstb}%`}}</view>
						</view>
					</view>
					<view class="total-tiem">
						<view class="total-tiem-title">家宽活跃用户数</view>
						<view class="total-tiem-icon">
							<view class="icon2"></view>
							<view class="text">{{yhsqkCoreData.f_jkhyyhs}}<i>万</i></view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkCoreData.f_jkhyyhsrcb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`日常比 ${yhsqkCoreData.f_jkhyyhsrcb}%`}}</view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkCoreData.f_jkhyyhstb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`同比 ${yhsqkCoreData.f_jkhyyhstb}%`}}</view>
						</view>
					</view>
					<view class="total-tiem">
						<view class="total-tiem-title">互联网电视播放用户数</view>
						<view class="total-tiem-icon">
							<view class="icon3"></view>
							<view class="text">{{yhsqkCoreData.f_hlwdsbfyhs}}<i>万</i></view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkCoreData.f_hlwdsbfyhsrcb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`日常比 ${yhsqkCoreData.f_hlwdsbfyhsrcb}%`}}</view>
						</view>
						<view class="total-tiem-text">
							<view :class="[yhsqkCoreData.f_hlwdsbfyhstb > 0 ? 'icon' : 'icon1']"></view>
							<view class="font">{{`同比 ${yhsqkCoreData.f_hlwdsbfyhstb}%`}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 业务量情况 -->
		<view class="business-volume">
			<view class="business-volume-theme">
				<view class="business-volume-tilie"></view>
				<view class="internet-traffic">
					
					<view class="internet-traffic-item casingHot">
						<view class="internet-traffic-item-title">
							<view class="internet-traffic-item-icon internet-traffic-item-icon1"></view>
							<view class="internet-traffic-item-title-text">5G流量</view>
						</view>
						

						<view class="history">
							<view class="history-right">
								<view class="today-traffic">
									<view class="today-traffic-text">{{coreData.f_5gll}}<i>TB</i></view>
									<view class="today-traffic-text1">今日流量</view>
								</view>
								<view class="daily">
									<view
										:class="[coreData.f_5gllrcb>0?'daily-icon':'daily-icon1',coreData.f_5gllrcb==0? 'daily-icon2':'']">
										{{coreData.f_5gllrcb != 0? (coreData.f_5gllrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									<view class="daily-text">较日常</view>
								</view>
							</view>
							<view class="vertical-line"></view>
							<view class="history-left">
								<view class="history-left-top">{{coreData.f_5glllsfz}}<i>TB</i></view>
								<view class="history-left-bottom">{{`历史峰值（${coreData.f_5glllsfzrq}）`}}</view>
							</view>
						
							<view class="hot" v-if="Number(coreData.f_5gll)>Number(coreData.f_5glllsfz)"></view>
						</view>
						<!-- 最忙时间 -->
						<view class="busiest-time">
							<view class="busiest-time-main">
								<view class="busiest-time-main-txet">最忙时段</view>
								<view class="busiest-time-main-txet1">{{coreData.f_5gllzmsd}}</view>
								<view class="busiest-time-main-txet1">{{coreData.f_5gllzmsdsz + 'TB'}}</view>
							</view>
						</view>
					</view>

					<view class='internet-traffic-item casingHot' style="margin-top: 30rpx;">
						<view class="internet-traffic-item-title">
							<view class="internet-traffic-item-icon internet-traffic-item-icon2"></view>
							<view class="internet-traffic-item-title-text">4G流量</view>
						</view>
						<view class="history">
							<view class="history-right">
								<view class="today-traffic">
									<view class="today-traffic-text">{{coreData.f_4gll}}<i>TB</i></view>
									<view class="today-traffic-text1">今日流量</view>
								</view>
								<view class="daily">
									<view
										:class="[coreData.f_4gllrcb>0?'daily-icon':'daily-icon1',coreData.f_4gllrcb==0? 'daily-icon2':'']">
										{{coreData.f_4gllrcb != 0? (coreData.f_4gllrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									<view class="daily-text">较日常</view>
								</view>
							</view>
							<view class="vertical-line"></view>
							<view class="history-left">
								<view class="history-left-top">{{coreData.f_4glllsfz}}<i>TB</i></view>
								<view class="history-left-bottom">{{`历史峰值（${coreData.f_4glllsfzrq}）`}}</view>
							</view>
							<view class="hot" v-if="Number(coreData.f_4gll)>Number(coreData.f_4glllsfz)"></view>
						</view>
						<!-- 最忙时间 -->
						<view class="busiest-time">
							<view class="busiest-time-main">
								<view class="busiest-time-main-txet">最忙时段</view>
								<view class="busiest-time-main-txet1">{{coreData.f_4gllzmsd}}</view>
								<view class="busiest-time-main-txet1">{{coreData.f_4gllzmsdsz + 'TB'}}</view>
							</view>
						</view>
					</view>
					
					<view class="internet-traffic-item casingHot" style="margin-top: 30rpx;">
						<view class="internet-traffic-item-title">
							<view class="internet-traffic-item-icon"></view>
							<view class="internet-traffic-item-title-text">话务量</view>
						</view>
						<view class="history">
							<view class="history-right">
								<view class="today-traffic">
									<view class="today-traffic-text">{{coreData.f_hwl}}<i>万ERL</i></view>
									<view class="today-traffic-text1">今日话务量</view>
								</view>
								<view class="daily">
									<view
										:class="[coreData.f_hwlrcb>0?'daily-icon':'daily-icon1',coreData.f_hwlrcb==0? 'daily-icon2':'']">
										{{coreData.f_hwlrcb != 0? (coreData.f_hwlrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									<view class="daily-text">较日常</view>
								</view>
							</view>
							<view class="vertical-line"></view>
							<view class="history-left">
								<view class="history-left-top">{{coreData.f_hwllsfz}}<i>万ERL</i></view>
								<view class="history-left-bottom">{{`历史峰值（${coreData.f_hwllsfzrq}）`}}</view>
							</view>
						
							<view class="hot" v-if="Number(coreData.f_hwl)>Number(coreData.f_hwllsfz)"></view>
						</view>
						<!-- 最忙时间 -->
						<view class="busiest-time">
							<view class="busiest-time-main">
								<view class="busiest-time-main-txet">最忙时段</view>
								<view class="busiest-time-main-txet1">{{coreData.f_hwlzmsd}}</view>
								<view class="busiest-time-main-txet1">{{coreData.f_hwlzmsdsz + '万ERL'}}</view>
						
							</view>
						</view>
					</view>

					<view class="internet-traffic-item casingHot" style="margin: 30rpx 0 40rpx 0; height: 230rpx;">
						<view class="internet-traffic-item-title">
							<view class="internet-traffic-item-icon internet-traffic-item-icon5"></view>
							<view class="internet-traffic-item-title-text">家宽流量</view>
						</view>
						<view class="history">
							<view class="history-right">
								<view class="today-traffic">
									<view class="today-traffic-text">{{ywlqkData.f_jkll}}<i>TB</i></view>
									<view class="today-traffic-text1">家宽流量</view>
								</view>
								<view class="daily">
									<view
										:class="[ywlqkData.f_jkllrcb>0?'daily-icon':'daily-icon1',ywlqkData.f_jkllrcb==0? 'daily-icon2':'']">
										{{ywlqkData.f_jkllrcb != 0? (ywlqkData.f_jkllrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									<view class="daily-text">较日常</view>
								</view>
							</view>
							<view class="vertical-line"></view>
							<view class="history-left">
								<view class="history-left-top">133726<i>TB</i></view>
								<view class="history-left-bottom">历史峰值（2024-02-24）</view>
							</view>
							<view class="hot" v-if="Number(ywlqkData.f_jkll)>133726"></view>
						</view>
						<!-- <view class="internet-traffic-text">
							<view class="internet-traffic-text-font">今日流量：</view>
							<view class="internet-traffic-text-font1">{{ywlqkData.f_jkll}}<i>TB</i></view>
							<view
								:class="[ywlqkData.f_jkllrcb>0?'internet-traffic-text-icon':'internet-traffic-text-icon1']">
							</view>
							<view class="internet-traffic-text-font2" :style="ywlqkData.f_jkllrcb < 0 ? 'color:#0CB480' : ''">日常比 {{ywlqkData.f_jkllrcb + '%'}}</view>
						</view> -->
					</view>
					<view class="internet-traffic-item casingHot" style="margin-top: 30rpx; height: 288rpx;">
						<view class="internet-traffic-item-title">
							<view class="internet-traffic-item-icon internet-traffic-item-icon4"></view>
							<view class="internet-traffic-item-title-text">互联网电视流量</view>
						</view>
						<view class="history">
							<view class="history-right">
								<view class="today-traffic">
									<view class="today-traffic-text">{{ywlqkData.f_hlwdsll}}<i>TB</i></view>
									<view class="today-traffic-text1">今日流量</view>
								</view>
								<view class="daily">
									<view
										:class="[ywlqkData.f_hlwdsllrcb>0?'daily-icon':'daily-icon1',ywlqkData.f_hlwdsllrcb==0? 'daily-icon2':'']">
										{{ywlqkData.f_hlwdsllrcb != 0? (ywlqkData.f_hlwdsllrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									<view class="daily-text">较日常</view>
								</view>
							</view>
							<view class="vertical-line"></view>
							<view class="history-left">
								<view class="history-left-top">71591<i>TB</i></view>
								<view class="history-left-bottom">历史峰值（2023-01-22）</view>
							</view>
							<view class="hot" v-if="Number(ywlqkData.f_hlwdsll)>71591"></view>
						</view>
						<!-- <view class="internet-traffic-text">
							<view class="internet-traffic-text-font">今日流量：</view>
							<view class="internet-traffic-text-font1">{{ywlqkData.f_hlwdsll}}<i>TB</i></view>
							<view
								:class="[ywlqkData.f_hlwdsllrcb>0?'internet-traffic-text-icon':'internet-traffic-text-icon1']">
							</view>
							<view class="internet-traffic-text-font2" :style="ywlqkData.f_hlwdsllrcb < 0 ? 'color:#0CB480' : ''">日常比 {{ywlqkData.f_hlwdsllrcb + '%'}}</view>
						</view> -->
						<view class="busiest-time">
							<view class="busiest-time-main">
								<view class="busiest-time-main-txet">最忙时段</view>
								<view class="busiest-time-main-txet1">{{ywlqkData.f_hlwdsllzmsd}}</view>
								<view class="busiest-time-main-txet1">{{ywlqkData.f_hlwdsllzmsdsz + 'TB'}}</view>
							</view>
						</view>
					</view>

					<view class="internet-traffic-item casingHot" style="margin-top: 30rpx; height: 288rpx;">
						<view class="internet-traffic-item-title">
							<view class="internet-traffic-item-icon internet-traffic-item-icon3"></view>
							<view class="internet-traffic-item-title-text">CMNET下行流量</view>
						</view>
						<view class="history">
							<view class="history-right">
								<view class="today-traffic">
									<view class="today-traffic-text">{{ywlqkData.f_cmnetxxll}}<i>TB</i></view>
									<view class="today-traffic-text1">今日流量</view>
								</view>
								<view class="daily">
									<view
										:class="[ywlqkData.f_cmnetxxllrcb>0?'daily-icon':'daily-icon1',ywlqkData.f_cmnetxxllrcb==0? 'daily-icon2':'']">
										{{ywlqkData.f_cmnetxxllrcb != 0? (ywlqkData.f_cmnetxxllrcb+ '').replace(/[-+]/g, '') + '%':''}}
									</view>
									<view class="daily-text">较日常</view>
								</view>
							</view>
							<view class="vertical-line"></view>
							<view class="history-left">
								<view class="history-left-top">138954<i>TB</i></view>
								<view class="history-left-bottom">历史峰值（2023-01-22）</view>
							</view>
							<view class="hot" v-if="Number(ywlqkData.f_cmnetxxll)>138954"></view>
						</view>
						<!-- <view class="internet-traffic-text">
							<view class="internet-traffic-text-font">今日流量：</view>
							<view class="internet-traffic-text-font1">{{ywlqkData.f_cmnetxxll}}<i>TB</i></view>
							<view
								:class="[ywlqkData.f_cmnetxxllrcb>0?'internet-traffic-text-icon':'internet-traffic-text-icon1']">
							</view>
							<view class="internet-traffic-text-font2" :style="ywlqkData.f_cmnetxxllrcb < 0 ? 'color:#0CB480' : ''">日常比 {{ywlqkData.f_cmnetxxllrcb + '%'}}</view>
						</view> -->
						<view class="busiest-time">
							<view class="busiest-time-main">
								<view class="busiest-time-main-txet">最忙时段</view>
								<view class="busiest-time-main-txet1">{{ywlqkData.f_cmnetxxllzmsd}}</view>
								<view class="busiest-time-main-txet1">{{ywlqkData.f_cmnetxxllzmsdsz + 'TB'}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 互联网质量 -->
		<view class="internet-quality">
			<view class="internet-quality-theme">
				<view class="internet-quality-tilie"></view>
				<!-- 网间电信 -->
				<view class="telecom" style="margin-bottom: 50rpx;">
					<view class="telecom-count">
						<view class="count-top">
							<u-icon name="play-right-fill" color="#A7ABBB" size="28"></u-icon>
							网间电信
						</view>
						<view class="telecom-count-main">
							<view class="main-item" style="border-right: 1px dotted  #C4C4C4;">
								<view class="font1">峰值流量</view>
								<view class="font2">{{hlwzlData.f_wjdxfzll}}<span>Gbps</span></view>
							</view>
							<view class="main-item">
								<view class="font1">峰值利用率</view>
								<view class="font2">{{hlwzlData.f_wjdxfzlyl}}<span>%</span></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 网间联通 -->
				<view class="telecom">
					<view class="telecom-count">
						<view class="count-top">
							<u-icon name="play-right-fill" color="#A7ABBB" size="28"></u-icon>
							网间联通
						</view>
						<view class="telecom-count-main">
							<view class="main-item" style="border-right: 1px dotted  #C4C4C4;">
								<view class="font1">峰值流量</view>
								<view class="font2">{{hlwzlData.f_wjltfzll}}<span>Gbps</span></view>
							</view>
							<view class="main-item">
								<view class="font1">峰值利用率</view>
								<view class="font2">{{hlwzlData.f_wjltfzlyl}}<span>%</span></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 负荷 -->
				<view class="load">
					<view class="load-main">
						<view class="load-main-top">
							<view class="load-main-top-item" style="margin-right: 17rpx;">
								<view class="font1">CDN平均负荷</view>
								<view class="font2">{{hlwzlData.f_cdnpjfh}}<span>%</span></view>
							</view>
							<view class="load-main-top-item" style="margin-left: 17rpx;">
								<view class="font1">CDN峰值负荷</view>
								<view class="font2">{{hlwzlData.f_cdnfzfh}}<span>%</span></view>
							</view>
						</view>
						<view class="load-main-top load-main-bottom">
							<view class="load-main-top-item" style="margin-right: 17rpx;">
								<view class="font1">电视播放成功率</view>
								<view class="font2">{{hlwzlData.f_dsbfcgl}}<span>%</span></view>
							</view>
							<view class="load-main-top-item" style="margin-left: 17rpx;">
								<view class="font1">电视卡顿时长占比</view>
								<view class="font2">{{hlwzlData.f_dskdsczb}}<span>%</span></view>
							</view>
						</view>
					</view>
					<view class="icon"></view>
				</view>

			</view>
		</view>
		<!-- 值班 -->
		<!-- <view class="natural-disaster watermark1">
			<view class="natural-disaster-title2"></view>
			<view class="paragraph" v-if="" homeData.f_zbxx>
				<view class="paragraph-text">
					<span v-html="homeData.f_zbxx"></span>
					<view class="paragraph-bg"></view>
					<view class="paragraph-bg1"></view>
				</view>
			</view>
		</view> -->
		<img src="@/static/images/dailyNewspaper/foot.png" class="pageFoot" alt="">
	</view>
</template>
<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				timeList: [{
					name: '廿一',
					value: '1月28日',
					id: '2025-01-20'
				}, {
					name: '廿二',
					value: '1月21日',
					id: '2025-01-21'
				}, {
					name: '廿三',
					value: '1月22日',
					id: '2025-01-22'
				}, {
					name: '廿四',
					value: '1月23日',
					id: '2025-01-23'
				}, {
					name: '廿五',
					value: '1月24日',
					id: '2025-01-24'
				}, {
					name: '廿六',
					value: '1月25日',
					id: '2025-01-25'
				}, {
					name: '廿七',
					value: '1月26日',
					id: '2025-01-26'
				}, {
					name: '廿八',
					value: '1月27日',
					id: '2025-01-27'
				}, {
					name: '除夕',
					value: '1月28日',
					id: '2025-01-28'
				}, {
					name: '春节',
					value: '1月29日',
					id: '2025-01-29'
				}, {
					name: '初二',
					value: '1月30日',
					id: '2025-01-30'
				}, {
					name: '初三',
					value: '1月31日',
					id: '2025-01-31'
				}, {
					name: '初四',
					value: '2月1日',
					id: '2025-02-01'
				}, {
					name: '初五',
					value: '2月2日',
					id: '2025-02-02'
				}, {
					name: '初六',
					value: '2月3日',
					id: '2025-02-03'
				}, {
					name: '初七',
					value: '2月4日',
					id: '2025-02-04'
				}, {
					name: '初八',
					value: '2月5日',
					id: '2025-02-05'
				}],
				//重点
				keyScenesList: ['省际漫游', '国际漫游', '重保区域'],
				keyScenesAction: 0,
				top3List: [{
						name: '武汉',
						num: '222'
					},
					{
						name: '咸宁',
						num: '333'
					},
					{
						name: '黄冈',
						num: '444'
					}
				],
				top3GtList: [{
						name: '京港澳高铁',
						num: '213'
					},
					{
						name: '黄咸高铁',
						num: '312'
					},
					{
						name: '武深高铁',
						num: '125'
					}
				],
				top3GsList: [{
						name: '京港澳高速',
						num: '213'
					},
					{
						name: '黄咸高速',
						num: '312'
					},
					{
						name: '武深高速',
						num: '125'
					}
				],
				top3JqList: [{
						name: '京港澳景区',
						num: '213'
					},
					{
						name: '黄咸景区',
						num: '312'
					},
					{
						name: '武深景区',
						num: '125'
					}
				],
				top3JtList: [{
						name: '京港澳交通',
						num: '213'
					},
					{
						name: '黄咸交通',
						num: '312'
					},
					{
						name: '武深交通',
						num: '125'
					}
				],
				top3NcList: [{
						name: '农村111',
						num: '213'
					},
					{
						name: '农村222',
						num: '312'
					},
					{
						name: '农村333',
						num: '125'
					}
				],
				// 互联网质量数据
				getnetworkDatails: {},
				today: '', // 选中的时间
				today1: '', // 今天的时间
				today3: '', // 今天的时间 不要年
				jksyData: {},
				hlwzlData: {}, // 互联网质量
				ywlqkData: {}, // 业务量-下
				coreData: {}, // 业务量-上
				yhsqkData: {}, // 用户数情况 -上
				yhsqkCoreData: {}, //  用户数情况 -下

				homeData: {},
				myxgData: {},
				myqsData: [],
				zbData: {},
			}
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {
				//重点
				this.initEcharts01()
				this.initEcharts02()
				this.init()
			})
		},
		methods: {
			init() {
				this.getTime()
				this.gethlwzlData()
				this.gethlwywlqkData()
				this.gethxwyhsqkData()
				this.gethlwyhsqkData()
				this.gethxwywlqkData()
				this.getjksyData()

				//漫游相关
				this.getmyxgData()
				//漫游趋势
				this.getmyqsData()
				//重保
				this.getwyzxZbqyData()

			},
			
			// 漫游相关
			async getmyxgData() {
				let data = await this.$api.getmyxgData();
				if (data.Code == 200) {
					console.log('漫游相关', data.Data)
					this.myxgData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 漫游趋势
			async getmyqsData() {
				let data = await this.$api.getmyqsData();
				if (data.Code == 200) {
					console.log('漫游趋势', data.Data)
					this.myqsData = data.Data
					if (this.keyScenesAction == 0) {
						this.initEcharts01()
					} else if (this.keyScenesAction == 1) {
						this.initEcharts02()
					}
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 重保
			async getwyzxZbqyData() {
				let data = await this.$api.getwyzxZbqyData();
				if (data.Code == 200) {
					console.log('重保', data.Data)
					this.zbData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},

			// 获取当前时间
			getTime() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				this.today = `${year}-${month}-${day}`;
				// this.today1 = `${year}-${month}-${day-1}`;
				this.today1 = this.getPreviousDay2(`${year}-${month}-${day}`).toISOString().split('T')[0];
				//当前日期的前一天
				
				this.today3 = this.timeList.filter(item => item.id == this.today1)[0].value
			},
			getPreviousDay2(dateString) {
			  const date = new Date(dateString);
			  date.setDate(date.getDate() - 1);
			  return date;
			},
			// 改变时间
			// changeDate(id) {
			// 	if (id > this.today1) return
			// 	this.today = id
			// },
			// 用户数情况 -上
			async getjksyData() {
				let data = await this.$api.getjksyDataRb();
				if (data.Code == 200) {
					this.jksyData = data.Data
					this.homeData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 用户数情况 -上
			async gethxwyhsqkData() {
				let data = await this.$api.gethxwyhsqkData();
				if (data.Code == 200) {
					this.yhsqkData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 用户数情况 -下
			async gethlwyhsqkData() {
				let data = await this.$api.gethlwyhsqkData();
				if (data.Code == 200) {
					this.yhsqkCoreData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取业务量情况 -上
			async gethxwywlqkData() {
				let data = await this.$api.gethxwywlqkData();
				if (data.Code == 200) {
					this.coreData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//  获取业务量情况 -下
			async gethlwywlqkData() {
				let data = await this.$api.gethlwywlqkData();
				if (data.Code == 200) {
					this.ywlqkData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取互联网质量
			async gethlwzlData() {
				let data = await this.$api.gethlwzlData();
				if (data.Code == 200) {
					this.hlwzlData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//省 nav切换导航
			onkeyScenes(item, index) {
				this.keyScenesAction = index
				if (index == 0) {
					this.$nextTick(() => {
						this.getmyqsData()
					})
				} else if (index == 1) {
					this.$nextTick(() => {
						this.getmyqsData()
					})
				} else if (index == 2) {
					this.$nextTick(() => {
						this.init2()
					})
				}
			},
			async init2() {
				// 高铁
				let option1 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 10,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高铁 4g
				let option1_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高铁
				let option2 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高铁 4g
				let option2_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gt4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速
				let option3 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速 4g
				let option3_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速
				let option4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 200,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 高速 4g
				let option4_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_gs4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区
				let option5 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区 4g
				let option5_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区
				let option6 = {
					series: [{
						type: 'gauge',
						min: 0,
						max:300,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 景区 4g
				let option6_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jq4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通
				let option7 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 15,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通 4g
				let option7_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通
				let option8 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 400,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 交通 4g
				let option8_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_jtsn4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村
				let option9 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 10,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc5gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村 g
				let option9_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 3,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: [ // 这个是修改仪表盘的进度条颜色的
									[1, '#A0DAAF'],
								]
							}
						},
						itemStyle: {
							color: '#13C05F', //颜色
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#0CB480',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#0CB480',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc4gyhsxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村
				let option10 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 100,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc5gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				// 农村 g
				let option10_4 = {
					series: [{
						type: 'gauge',
						min: 0,
						max: 30,
						startAngle: 225,
						endAngle: -45,
						center: ['50%', '50%'],
						radius: '100%',
						axisLine: {
							lineStyle: {
								width: 10,
								color: [
									[1, '#BFDBE6']
								]
							}
						},
						itemStyle: {
							color: '#007AFF', //颜色
						},
						progress: {
							show: true, //是否显示进度条
							roundCap: true, //是否在两端显示成圆形
							width: 10, //进度条宽度
							color: ''
						},
						axisLabel: { // 坐标轴小标记
							show: false,
							textStyle: { // 属性lineStyle控制线条样式
								color: '#fff',
								fontSize: 0, //改变仪表盘内刻度数字的大小
								shadowColor: '#fff',
							} //默认透明        
						},

						axisTick: {
							//刻度样式
							distance: 3, //刻度线距仪表盘的距离
							length: 5, //刻度线长度
							lineStyle: {
								color: '#ebebeb',
								width: 1 //刻度线线宽
							}
						},
						splitLine: {
							distance: 3,
							length: 10,
							lineStyle: {
								color: '#9b9b9b',
								width: 2 //刻度线线宽
							}
						},
						detail: {
							offsetCenter: [0, 12],
							valueAnimation: true,
							formatter: function(value) {
								return `{value|${value}}\n {unit|Mbps}`;
							},
							rich: {
								value: {
									color: '#007AFF',
									fontSize: 20,
									fontWeight: 'bold' // 数据加粗
								},
								unit: {
									color: '#007AFF',
									fontSize: 12,
									padding: [-18, 0, 0, -8] // [上, 右, 下, 左]，增加单位与数值之间的距离
								}
							}
						},
						data: [{
							value: this.zbData.f_nc4gyhxxtysl,
						}],
						pointer: {
							show: false // 隐藏指针
						}
					}]
				};
				const chart1 = await this.$refs.chartRefYb1.init(echarts)
				chart1.setOption(option1);
				const chart1_4 = await this.$refs.chartRefYb1_4.init(echarts)
				chart1_4.setOption(option1_4);
				const chart2 = await this.$refs.chartRefYb2.init(echarts)
				chart2.setOption(option2);
				const chart2_4 = await this.$refs.chartRefYb2_4.init(echarts)
				chart2_4.setOption(option2_4);
				const chart3 = await this.$refs.chartRefYb3.init(echarts)
				chart3.setOption(option3);
				const chart3_4 = await this.$refs.chartRefYb3_4.init(echarts)
				chart3_4.setOption(option3_4);
				const chart4 = await this.$refs.chartRefYb4.init(echarts)
				chart4.setOption(option4);
				const chart4_4 = await this.$refs.chartRefYb4_4.init(echarts)
				chart4_4.setOption(option4_4);
				const chart5 = await this.$refs.chartRefYb5.init(echarts)
				chart5.setOption(option5);
				const chart5_4 = await this.$refs.chartRefYb5_4.init(echarts)
				chart5_4.setOption(option5_4);
				const chart6 = await this.$refs.chartRefYb6.init(echarts)
				chart6.setOption(option6);
				const chart6_4 = await this.$refs.chartRefYb6_4.init(echarts)
				chart6_4.setOption(option6_4);
				const chart7 = await this.$refs.chartRefYb7.init(echarts)
				chart7.setOption(option7);
				const chart7_4 = await this.$refs.chartRefYb7_4.init(echarts)
				chart7_4.setOption(option7_4);
				const chart8 = await this.$refs.chartRefYb8.init(echarts)
				chart8.setOption(option8);
				const chart8_4 = await this.$refs.chartRefYb8_4.init(echarts)
				chart8_4.setOption(option8_4);
				const chart9 = await this.$refs.chartRefYb9.init(echarts)
				chart9.setOption(option9);
				const chart9_4 = await this.$refs.chartRefYb9_4.init(echarts)
				chart9_4.setOption(option9_4);
				const chart10 = await this.$refs.chartRefYb10.init(echarts)
				chart10.setOption(option10);
				const chart10_4 = await this.$refs.chartRefYb10_4.init(echarts)
				chart10_4.setOption(option10_4);
			},
			//省漫游
			async initEcharts01() {
				let option = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							console.log('params', params)
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_sjmryhs)[dataIndex]}万`,
								`较日常: ${this.myqsData.map(item=>item.f_sjmryhsrcb)[dataIndex]}%`,
								// `用户数同比: ${this.myqsData.map(item=>item.f_sjmryhstb)[dataIndex]}%`,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							interval: 0,
							rotate: -45, // 设置 X 轴标签顺时针旋转45度
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常'],
						top: '19px',
						right: 'center',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 8,
							rich: {
								a: {
									verticalAlign: 'middle'
								}
							}
						},
					},
					yAxis: [{
						type: 'value',
						name: "单位（万）",
						axisLabel: {
							fontSize: 10,
							color: '#707070', // 
							splitNumber: 5 // 设置刻度分4份
						},
					}, {
						type: 'value',
						name: "",
						axisLabel: {
							fontSize: 10,
							color: '#707070', // 
							formatter: '{value}%'
						},
						axisLine: {
							show: false, // 隐藏第二条y轴的轴线 
						},
						axisTick: {
							show: false, // 隐藏第二条y轴的刻度线 
						},
						splitLine: {
							show: false, // 隐藏第二条y轴的分割线 
						}

					}],
					series: [{
							data: this.myqsData.map(item => parseFloat(item.f_sjmryhs) || 0),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0, // 绑定到百分比 Y 轴
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_sjmryhsrcb) || 0),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1, // 绑定到百分比 Y 轴
						},
						// {
						// 	data: this.myqsData.map(item => parseFloat(item.f_sjmryhstb) || 0),
						// 	type: 'line',
						// 	name: '用户数同比',
						// 	itemStyle: {
						// 		color: '#A7ABBB',
						// 	},
						// 	symbol: "none", //不显示拐点
						// 	barWidth: 6,
						// 	yAxisIndex: 1, // 绑定到百分比 Y 轴
						// }
					],
				}
				console.log(this.myqsData.map(item => parseFloat(item.f_sjmryhstb) || 0),
					'this.myqsData.map(item => parseFloat(item.f_sjmryhstb) || 0)')
				let option2 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_sjmcyhs)[dataIndex]}万 `,
								`较日常: ${this.myqsData.map(item=>item.f_sjmcyhsrcb)[dataIndex]}% `,
								// `用户数同比: ${this.myqsData.map(item=>item.f_sjmcyhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							},
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							interval: 0,
							rotate: -45, // 设置 X 轴标签顺时针旋转45度
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常'],
						top: '19px',
						right: 'center',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
						type: 'value',
						name: "单位（万）",
						axisLabel: {
							fontSize: 10,
							color: '#707070', // 
						},
					}, {
						type: 'value',
						name: "",
						axisLabel: {
							fontSize: 10,
							color: '#707070', // 
							formatter: '{value}%'
						},
						axisLine: {
							show: false, // 隐藏第二条y轴的轴线 
						},
						axisTick: {
							show: false, // 隐藏第二条y轴的刻度线 
						},
						splitLine: {
							show: false, // 隐藏第二条y轴的分割线 
						}
					}],
					series: [{
							data: this.myqsData.map(item => parseFloat(item.f_sjmcyhs)),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_sjmcyhsrcb)),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1, // 绑定到百分比 Y 轴

						},
						// {
						// 	data: this.myqsData.map(item => parseFloat(item.f_sjmcyhstb)),
						// 	type: 'line',
						// 	name: '用户数同比',
						// 	itemStyle: {
						// 		color: '#A7ABBB',
						// 	},
						// 	symbol: "none", //不显示拐点
						// 	barWidth: 6,
						// 	yAxisIndex: 1, // 绑定到百分比 Y 轴
						// }
					],
				}
				if (this.$refs.echartRef1 && this.$refs.echartRef2) {
					const chart1 = await this.$refs.echartRef1.init(echarts)
					chart1.setOption(option);
					const chart2 = await this.$refs.echartRef2.init(echarts)
					chart2.setOption(option2);
				}
			},
			//国漫游
			async initEcharts02() {
				let option3 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_gjgatdqmryhs)[dataIndex]}万 `,
								`较日常: ${this.myqsData.map(item=>item.f_gjgatdqmryhsjrc)[dataIndex]}% `,
								// `用户数同比: ${this.myqsData.map(item=>item.f_gjgatdqmryhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							interval: 0,
							rotate: -45, // 设置 X 轴标签顺时针旋转45度
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常'],
						top: '19px',
						right: 'center',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
							},
							name: "单位（万）",
							type: 'value',
						},
						{
							type: 'value',
							name: "",
							axisLabel: {
								fontSize: 10,
								color: '#707070', // 
								formatter: '{value}%'
							},
							axisLine: {
								show: false, // 隐藏第二条y轴的轴线 
							},
							axisTick: {
								show: false, // 隐藏第二条y轴的刻度线 
							},
							splitLine: {
								show: false, // 隐藏第二条y轴的分割线 
							}
						}
					],
					series: [{
							data: this.myqsData.map(item => parseFloat(item.f_gjgatdqmryhs) || 0),
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.myqsData.map(item => parseFloat(item.f_gjgatdqmryhsjrc) || 0),
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,

							yAxisIndex: 1,
						},
						// {
						// 	data: this.myqsData.map(item => parseFloat(item.f_gjgatdqmryhstb) || 0),
						// 	type: 'line',
						// 	name: '用户数同比',
						// 	itemStyle: {
						// 		color: '#A7ABBB',
						// 	},
						// 	symbol: "none", //不显示拐点
						// 	barWidth: 6,
						// 	yAxisIndex: 1,
						// }
					],
				}
				let option4 = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
								params[0].name,
								`用户数: ${this.myqsData.map(item=>item.f_gjgatdqmcyhs)[dataIndex]}万 `,
								`较日常: ${this.myqsData.map(item=>item.f_gjgatdqmcyhsjrc)[dataIndex]}% `,
								// `用户数同比: ${this.myqsData.map(item=>item.f_gjgatdqmcyhstb)[dataIndex]}% `,
							].join('\n');
						}
					},
					grid: {
						top: '50px',
						bottom: '35px',
						left: '50px',
						right: '50px'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#A4A8B7', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.myqsData.map(item => item.f_sj),
						axisLabel: {
							textStyle: {
								fontSize: 10 // 设置 X 轴标签的字体大小
							},
							interval: 0,
							rotate: -45, // 设置 X 轴标签顺时针旋转45度
							margin: 15, // 设置 X 轴标签与 X 轴的距离
							formatter: function(value) {
								return value.split('').join('\n')
							}
						}
					},
					legend: {
						data: ['用户数', '较日常'],
						top: '19px',
						right: 'center',
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10, // 设置图例项的高度
						textStyle: {
							color: '#5C5C5C', // 设置图例文字颜色
							fontSize: 10 // 设置图例文字大小
						}
					},
					yAxis: [{
							axisLabel: {
								color: '#A7ABBB', // 设置标签颜色
							},
							name: "单位（万）",
							type: 'value',
						},
						{
							type: 'value',
							name: "",
							axisLabel: {
								fontSize: 10,
								color: '#707070', // 
								formatter: '{value}%'
							},
							axisLine: {
								show: false, // 隐藏第二条y轴的轴线 
							},
							axisTick: {
								show: false, // 隐藏第二条y轴的刻度线 
							},
							splitLine: {
								show: false, // 隐藏第二条y轴的分割线 
							}
						}
					],
					series: [{
							data: this.myqsData.map(item => item.f_gjgatdqmcyhs),
							// data: [100, , 80, 90, 90, 73, 60, 96, 15, 16],
							type: 'bar',
							name: '用户数',
							itemStyle: {
								color: '#F37A00',
								borderWidth: 0
							},

							barWidth: 6,
							yAxisIndex: 0,
						},
						{
							data: this.myqsData.map(item => item.f_gjgatdqmcyhsjrc),
							// data: [100, , 80, 90, -30, 73, -20, 98, 18, 78],
							type: 'line',
							name: '较日常',
							itemStyle: {
								color: '#2654B0',
								borderWidth: 0
							},
							symbol: "none", //不显示拐点
							barWidth: 6,
							yAxisIndex: 1,
						},
						// {
						// 	data: this.myqsData.map(item => item.f_gjgatdqmcyhstb),
						// 	type: 'line',
						// 	name: '用户数同比',
						// 	itemStyle: {
						// 		color: '#A7ABBB',
						// 	},
						// 	symbol: "none", //不显示拐点
						// 	barWidth: 6,
						// 	yAxisIndex: 1,
						// }
					],
				}
				if (this.$refs.echartRef3 && this.$refs.echartRef4) {
					const chart3 = await this.$refs.echartRef3.init(echarts)
					chart3.setOption(option3);
					const chart4 = await this.$refs.echartRef4.init(echarts)
					chart4.setOption(option4);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #EC3826;
		padding: 0 10rpx;
		width: 100vw;
		overflow-x: hidden;
		.content-title {
			width: 750rpx;
			height: 750rpx;
			background: url(@/static/images/dailyNewspaper/topbg.png) no-repeat;
			background-size: 750rpx;
		}

		.content-letter {
			margin-top: -130rpx;
			width: 100%;

			border: 10rpx solid #ffcfa5;
			border-radius: 16rpx;
			background: url(@/static/images/dailyNewspaper/1.png) no-repeat;
			background-size: 100% 675rpx;

			// overflow: hidden;
			.content-letter-top {
				margin-top: -80rpx;
				height: 200rpx;
				width: 710rpx;
				background: url(@/static/images/dailyNewspaper/3.png) no-repeat;
				background-size: 100% 100%;
				text-align: center;
				font-weight: bold;
				font-size: 30rpx;
				padding-top: 110rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
			}

			.content-letter-bg {

				margin-top: -20rpx;
				width: 710rpx;
				// height: 410rpx;
				background: center top url(@/static/images/dailyNewspaper/2.png) no-repeat;
				background-size: 720rpx 102%;

				.content-letter-bg-bg {
					width: 710rpx;
					// height: 410rpx;
					background: center bottom url(@/static/images/dailyNewspaper/4.png) no-repeat;
					background-size: 710rpx 280rpx;

					.bg-title {
						height: 94rpx;
						padding-top: 27rpx;
						display: flex;
						align-items: center;

						.bg-title-icon {
							margin: 0rpx 11rpx 0 64rpx;
							width: 78rpx;
							height: 78rpx;
							background: center bottom url(@/static/images/dailyNewspaper/5.png) no-repeat;
							background-size: 100% 100%;
						}

						.bg-title-font {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 34rpx;
							color: #000000;
						}
					}

					.bg-content {
						min-height: 100rpx;
						margin-top: 10rpx;
						padding: 0 88rpx;
						padding: 0 88rpx 200rpx 88rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 48rpx;
						text-align: left;
					}
				}

			}

			.content-letter-bg-carousel {

				padding-top: 10rpx;
				margin-top: -10rpx;
				width: 710rpx;
				height: 150rpx;
				background: #fff2e1;
				display: flex;
				white-space: nowrap;

				.bg {
					overflow: auto;

					.carousel-item {
						overflow: auto;
						width: 110rpx;
						height: 110rpx;
						margin-left: 20rpx;
						background: linear-gradient(#FFEDE0 0%, #FFFFFF 100%);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 1rpx solid #FFFFFF;
						text-align: center;
						display: inline-block;

						.carousel-item-name {
							font-weight: bold;
							font-size: 24rpx;
							color: #000000;
							margin: 18rpx 0 9rpx 0;
						}

						.carousel-item-value {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #E9423B;
						}
					}

					.carousel-item1 {
						overflow: auto;
						width: 110rpx;
						height: 130rpx;
						margin-left: 20rpx;
						background: bottom center url(@/static/images/dailyNewspaper/6.png) no-repeat;
						background-size: 100% 125rpx;
						background-position: top center -27px;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						text-align: center;
						display: inline-block;
						position: relative;

						.carousel-item-name {
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
							margin: 38rpx 0 9rpx 0;
						}

						.carousel-item-value {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
						}
					}

					.carousel-item2 {
						overflow: auto;
						width: 110rpx;
						height: 110rpx;
						margin-left: 20rpx;
						background: linear-gradient(#FFEDE0 0%, #FFFFFF 100%);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 1rpx solid #FFFFFF;
						text-align: center;
						display: inline-block;

						.carousel-item-name {
							font-weight: bold;
							font-size: 24rpx;
							color: #A7ABBB;
							margin: 18rpx 0 9rpx 0;
						}

						.carousel-item-value {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #A7ABBB;
						}
					}
				}

			}
		}

		.content_nr {
			padding-bottom: 20rpx;
		}

		.keyScenes {
			width: 710rpx;
			margin: 70rpx auto 0;
			background-color: #fffbf1;
			border: 10rpx #FFCFA5 solid;
			border-radius: 20rpx;
			position: relative;
			padding-bottom: 50rpx;

			.keyScenes_topBg {
				width: 500rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-top: -26rpx;
				display: block;
			}

			.keyScenes_nav {
				margin-top: 7rpx;
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.keyScenes_nav_item {
					width: 150rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: url(@/static/images/summaryReport/tapbg2.png) no-repeat;
					background-size: 100% 100%;
					color: #000000;
					text-shadow: 3rpx 3rpx 0 #FFFFFF;
					text-stroke: 1px rgba(0, 0, 0, 0);
				}

				.keyScenes_active {
					background: url(@/static/images/summaryReport/tapbg1.png) no-repeat !important;
					background-size: 100% 100% !important;
					color: #FFFFFF;
					text-shadow: 3rpx 3rpx 0 #000000;
					text-stroke: 1px rgba(0, 0, 0, 0);
				}
			}

			.keyScenes_nr1,
			.keyScenes_nr3 {
				.business-one {
					margin-top: 20rpx;
					width: 100%;
					background-color: #FDE8DC;
					border: 2rpx #FDE8DC dashed;
					display: flex;
					align-items: center;

					.business-one-left {
						width: 117rpx;
						height: 117rpx;
						background: url(@/static/images/summaryReport/pic16.png) no-repeat;
						background-size: 70% 100%;
					}

					.keyScenes3bg {
						width: 117rpx;
						height: 117rpx;
						background: url(@/static/images/summaryReport/pic0.png) no-repeat;
						background-size: 100% 100%;
					}

					.business-one-center {
						margin-left: 33rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #D61515;
						margin: 24rpx;
					}

					.business-one-right {
						font-weight: normal;
						font-size: 48rpx;
						color: #D61515;
					}
				}
			}

			.compare {
				margin-top: 67rpx;
				padding: 0 0rpx 0 60rpx;

				.draw {
					display: flex;
					margin-top: 34rpx;

					.draw-left {
						width: 50%;

						.draw-left-top {
							font-weight: 400;
							font-size: 30rpx;
							color: #000000;
						}

						.draw-left-bottom {
							display: flex;
							align-items: center;
							margin: 17rpx 0rpx 0rpx 10rpx;

							.draw-left-bottom-icon {
								margin-right: 12rpx;
								width: 56rpx;
								height: 56rpx;
								background: url(@/static/images/summaryReport/icon/icon5.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-left-bottom-font {
								font-weight: bold;
								font-size: 48rpx;
								color: #FF3B2F;
							}

							.draw-left-bottom-unit {
								font-weight: 400;
								font-size: 30rpx;
								color: #FF3B2F;
							}
						}
					}

					.draw-right {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.draw-right-daily {
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							text-align: center;

							.draw-right-icon1 {
								line-height: 100rpx;
								font-size: 26rpx;
								font-weight: bold;
								color: #FFFFFF;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic3.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-right-icon2 {
								line-height: 100rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								font-weight: bold;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic4.png) no-repeat !important;
								background-size: 100% 100% !important;
							}

							.draw-right-icon3 {
								line-height: 100rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								font-weight: bold;
								min-width: 100rpx;
								height: 104rpx;
								background: url(@/static/images/summaryReport/pic12.png) no-repeat !important;
								background-size: 100% 100% !important;
							}
						}
					}
				}
			}

			.threeChart {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				width: 100%;

				.threeChart-item {
					width: 33%;
					height: 200rpx;
					text-align: center;

					.threeChart-item-casing {
						height: 160rpx;
						width: 100%;
					}

					.threeChart-item-text {
						height: 40rpx;
						width: 100%;
					}
				}
			}

			.keyScenes_text {
				width: 580rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 40rpx;
				font-style: normal;
				text-transform: none;
				margin: 40rpx auto;
			}

			.keyScenes_top3 {
				display: block;
				width: 580rpx;
				margin: 0 auto;
				position: relative;

				.keyScenes_top3_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #8D0B0B;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.keyScenes_top3_icon {
					width: 120rpx;
					height: 120rpx;
					position: absolute;
					top: -20px;
					right: 30px;
				}

				.keyScenes_top3_nr {
					display: block;
					margin-top: 30rpx;

					.keyScenes_top3_nrItem {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.nrItem_index {
							width: 86rpx;
							height: 54rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 54rpx;
							background: url(@/static/images/summaryReport/pic9.png) no-repeat;
							background-size: 100% 100%;
							margin-right: 20rpx;
						}

						.nrItem_name {

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							margin-right: 10rpx;
						}

						.nrItem_num {
							width: 80rpx;
							font-family: Roboto, Roboto;
							font-weight: bold;
							font-size: 26rpx;
							color: #F37A00;
							margin-right: 15rpx;
						}

						.nrItem_jdt {
							width: 166rpx;
							height: 19rpx;
							background: linear-gradient(90deg, #FAD1A3 0%, #FF873C 100%);
							border-radius: 8rpx;
						}
					}
				}
			}

			.keyScenes_nr3 {
				.banner_gt {
					width: 650rpx;
					height: 86rpx;
					margin: 24rpx auto;
					display: block;
				}

				.gaotie_view {
					width: 649rpx;
					height: 440rpx;
					border-radius: 16rpx;
					margin: 0 auto;
					background: center center url(@/static/images/summaryReport/bg/zbBg.png) no-repeat;
					background-size: 649rpx 440rpx;

					// background: center center url(@/static/images/summaryReport/shuiying.png) no-repeat;
					// background-size: 370rpx 370rpx;

					.gt_logo {
						width: 126rpx;
						height: 45rpx;
						line-height: 45rpx;
						text-align: center;
						background: #FF3B2F;
						font-size: 26rpx;
						color: #FFFFFF;
						border-radius: 16rpx 0rpx 16rpx 0rpx;
					}

					.proportion1 {
						display: flex;
						justify-content: center;
						margin-top: 20rpx;

						.proportion1-item {
							width: 50%;
						}

						.font {
							width: 70%;
							text-align: center;
							margin: 0 auto;
							color: #A7ABBB;
							font-size: 24rpx;
						}
						.maxZ{
							font-size: 20rpx;
							margin-bottom: 20rpx;
						}
					}

					.keyScenes_nr3_title_num {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 48rpx;

						.keyScenes_nr3_title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #5F6475;
							text-stroke: 1px rgba(0, 0, 0, 0);
							font-style: normal;
							text-transform: none;
							margin-right: 14rpx;
						}

						.keyScenes_nr3_num {
							font-family: Roboto, Roboto;
							font-weight: bold;
							font-size: 28rpx;
							color: #007AFF;
							text-stroke: 1px rgba(0, 0, 0, 0);
							font-style: normal;
							text-transform: none;
							-webkit-text-stroke: 1px rgba(0, 0, 0, 0);
						}
					}

					.jrcView {
						display: inline-block;
						margin-left: 72rpx;
						margin-top: 4rpx;
						margin-bottom: 30rpx;

						.jsc_sz,
						.jsc_cp,
						.jsc_xj {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #D61515;
							text-stroke: 1px rgba(0, 0, 0, 0);
							text-align: left;
							font-style: normal;
							text-transform: none;
							-webkit-text-stroke: 1px rgba(0, 0, 0, 0);
						}

						.jrc_icon {
							width: 28rpx;
							margin-right: 16rpx;
						}
					}
				}

				.keyScenes_top3 {
					display: block;
					margin: 20rpx auto;
					position: relative;
					padding: 28rpx 46rpx;
					width: 650rpx;
					border-radius: 16rpx;
					border: 1rpx solid #F1AEAE;

					.keyScenes_top3_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #8D0B0B;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.keyScenes_top3_icon {
						width: 140rpx;
						height: 140rpx;
						position: absolute;
						top: 0rpx;
						right: 20rpx;
					}

					.keyScenes_top3_nr {
						display: block;
						margin-top: 30rpx;

						.keyScenes_top3_nrItem {
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.nrItem_index {
								width: 86rpx;
								height: 54rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 54rpx;
								background: url(@/static/images/summaryReport/pic9.png) no-repeat;
								background-size: 100% 100%;
								margin-right: 20rpx;
							}

							.nrItem_name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
								margin-right: 30rpx;
							}

							.nrItem_num {
								font-family: Roboto, Roboto;
								font-weight: bold;
								font-size: 22rpx;
								color: #F37A00;
								margin-right: 25rpx;
							}

							.nrItem_jdt {
								width: 166rpx;
								height: 19rpx;
								background: linear-gradient(90deg, #FAD1A3 0%, #FF873C 100%);
								border-radius: 8rpx;
							}
						}
					}
				}
			}

		}

		.serSituation {
			margin-top: 30rpx;
			padding: 0 10rpx;

			.serSituation-theme {
				width: 100%;
				background: linear-gradient(to bottom, #FFF9F1, #FFF1DD);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 10rpx solid #FFCFA5;

				.serSituation-theme-tilie {
					width: 500rpx;
					height: 80rpx;
					margin: 0 auto;
					background: url(@/static/images/dailyNewspaper/bg1.png) no-repeat;
					background-size: 100% 100%;
					position: relative;
					top: -26rpx;
				}

				.total-users {
					padding: 21rpx 28rpx 0 22rpx;

					.total-users-theme {
						width: 100%;
						height: 160rpx;
						box-shadow: 10rpx 10rpx 0rpx 1rpx rgba(0, 0, 0, 0.1);

						.total-users-theme-top {
							width: 100%;
							height: 50rpx;
							text-align: center;
							line-height: 50rpx;
							background: #EC3826;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
							border-radius: 16rpx 16rpx 0rpx 0rpx;

						}

						.total-users-theme-bottom {
							width: 100%;
							height: 110rpx;
							background: #ffffff;
							display: flex;

							.theme-bottom-left {
								width: 50%;
								display: flex;
								align-items: center;

								.icon {
									margin-left: 45rpx;
									margin-right: 34rpx;
									width: 64rpx;
									height: 64rpx;
									background: url(@/static/images/dailyNewspaper/icon20.png) no-repeat;
									background-size: 100% 100%;
								}

								.text {
									font-family: Roboto, Roboto;
									font-weight: bold;
									font-size: 28rpx;
									color: #000000;

									i {
										font-size: 18rpx;
										font-style: normal;
									}
								}
							}

							.theme-bottom-right {
								width: 50%;

								.theme-bottom-right-top {
									margin-left: 40rpx;
									margin-top: 18rpx;
									display: flex;
									align-items: center;

									.icon {
										width: 24rpx;
										height: 24rpx;
										background: url(@/static/images/dailyNewspaper/icon10-1.png) no-repeat;
										background-size: 100% 100%;
									}

									.icon1 {
										width: 24rpx;
										height: 24rpx;
										background: url(@/static/images/dailyNewspaper/icon10-4.png) no-repeat;
										background-size: 100% 100%;
									}

									.text {
										margin-left: 7rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 24rpx;
										color: #5F6475;
									}
								}
							}

						}
					}
				}

				.total-5G-VOLTE {
					margin-top: 30rpx;
					padding: 21rpx 28rpx 0 22rpx;
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					justify-content: space-between;

					.total-tiem {
						width: 48%;
						height: 240rpx;
						background: #FFFFFF;
						box-shadow: 10rpx 10rpx 0rpx 1rpx rgba(0, 0, 0, 0.1);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 1rpx solid #D9D2CB;
						margin-bottom: 30rpx;

						.total-tiem-title {
							width: 100%;
							height: 51rpx;
							text-align: center;
							line-height: 50rpx;
							background: #EC3826;
							border-radius: 16rpx 16rpx 0rpx 0rpx;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.total-tiem-icon {
							margin-top: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.icon0 {
								margin-right: 0rpx;
								width: 48rpx;
								height: 48rpx;
								background: url(@/static/images/dailyNewspaper/icon21.png) no-repeat;
								background-size: 100% 100%;
							}

							.icon1 {
								margin-right: 0rpx;
								width: 48rpx;
								height: 48rpx;
								background: url(@/static/images/dailyNewspaper/icon22.png) no-repeat;
								background-size: 100% 100%;
							}

							.icon2 {
								margin-right: 0rpx;
								width: 48rpx;
								height: 48rpx;
								background: url(@/static/images/dailyNewspaper/icon23.png) no-repeat;
								background-size: 100% 100%;
							}

							.icon3 {
								margin-right: 0rpx;
								width: 48rpx;
								height: 48rpx;
								background: url(@/static/images/dailyNewspaper/icon24.png) no-repeat;
								background-size: 100% 100%;
							}

							.text {
								font-family: Roboto, Roboto;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
								margin-left: 38rpx;

								i {
									font-weight: 400;
									font-size: 20rpx;
									font-style: normal;
								}
							}
						}

						.total-tiem-text {
							margin-top: 20rpx;
							display: flex;
							align-items: center;

							.icon {
								margin: 0 16rpx 0 40rpx;
								width: 24rpx;
								height: 24rpx;
								background: url(@/static/images/dailyNewspaper/icon10-1.png) no-repeat;
								background-size: 100% 100%;
							}

							.icon1 {
								margin: 0 16rpx 0 40rpx;
								width: 24rpx;
								height: 24rpx;
								background: url(@/static/images/dailyNewspaper/icon10-4.png) no-repeat;
								background-size: 100% 100%;
							}

							.font {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #5F6475;
								line-height: 0rpx;
							}
						}
					}
				}
			}
		}

		.business-volume {
			margin-top: 50rpx;
			padding: 0 10rpx;

			.business-volume-theme {
				width: 100%;

				background: linear-gradient(to bottom, #FFF9F1, #FFF1DD);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 10rpx solid #FFCFA5;

				.business-volume-tilie {
					width: 500rpx;
					height: 80rpx;
					margin: 0 auto;
					background: url(@/static/images/dailyNewspaper/bg2.png) no-repeat;
					background-size: 100% 100%;
					position: relative;
					top: -26rpx;
				}

				.internet-traffic {
					margin-top: 22rpx;
					padding: 0 35rpx 30rpx 30rpx;

					.internet-traffic-item {
						width: 100%;
						height: 300rpx;
						background: #FFFFFF;
						box-shadow: 10rpx 10rpx 0rpx 1rpx rgba(0, 0, 0, 0.1);
						border: 1rpx solid #D9D2CB;
						border-radius: 16rpx;

						.internet-traffic-item-title {
							width: 100%;
							height: 60rpx;
							background: #FF6142;
							border-radius: 0rpx 0rpx 16rpx 16rpx;
							position: relative;

							.internet-traffic-item-icon {
								width: 100rpx;
								height: 100rpx;
								background: url(@/static/images/dailyNewspaper/icon25.png) no-repeat;
								background-size: 100% 100%;
								position: absolute;
								left: -24rpx;
								top: -24rpx;
							}

							.internet-traffic-item-icon1 {
								background: url(@/static/images/dailyNewspaper/icon26.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-item-icon2 {
								background: url(@/static/images/dailyNewspaper/icon27.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-item-icon3 {
								background: url(@/static/images/dailyNewspaper/icon28.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-item-icon4 {
								background: url(@/static/images/dailyNewspaper/icon29.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-item-icon5 {
								background: url(@/static/images/dailyNewspaper/icon30.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-item-title-text {
								margin-left: 90rpx;
								line-height: 60rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}

						.busiest-time {
							margin-top: 20rpx;
							padding: 0 48rpx 0 38rpx;

							.busiest-time-main {
								padding: 0 34rpx 0 22rpx;
								width: 100%;
								height: 40rpx;
								background: #FFF8E8;
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.busiest-time-main-txet {
									font-family: Roboto, Roboto;
									font-size: 24rpx;
									color: #5F6475;
								}

								.busiest-time-main-txet1 {
									font-family: Roboto, Roboto;
									font-weight: bold;
									font-size: 26rpx;
									color: #FF4D4D;
								}
							}
						}

						.history {
							display: flex;

							.history-left {
								width: 50%;
								text-align: center;

								.history-left-top {
									margin: 43rpx 0 10rpx 0;
									font-family: Roboto, Roboto;
									font-weight: bold;
									font-size: 26rpx;
									color: #5F6475;

									i {
										font-style: normal;
										font-size: 20rpx;
									}
								}

								.history-left-bottom {
									font-size: 22rpx;
									color: #5F6475;
								}
							}

							.vertical-line {
								width: 2rpx;
								height: 68rpx;
								border-left: 1px dashed #707070;
								margin-top: 50rpx;
							}

							.history-right {
								width: 49%;
								text-align: center;
								display: flex;

								.today-traffic {
									margin: 42rpx 30rpx 0 34rpx;

									.today-traffic-text {
										font-family: Roboto, Roboto;
										font-weight: bold;
										font-size: 26rpx;
										color: #FF3B2F;
										margin-bottom: 10rpx;

										i {
											font-style: normal;
											font-size: 20rpx;
										}
									}

									.today-traffic-text1 {
										font-size: 22rpx;
										color: #5F6475;
									}
								}

								.daily {
									margin-top: 10rpx;

									.daily-icon {
										width: 104rpx;
										height: 90rpx;
										line-height: 90rpx;
										text-align: center;
										font-weight: bold;
										font-size: 24rpx;
										color: #FFFFFF;
										background: url(@/static/images/dailyNewspaper/pic3.png) no-repeat;
										background-size: 100% 100%;
									}

									.daily-icon1 {
										width: 104rpx;
										height: 90rpx;
										line-height: 90rpx;
										text-align: center;
										font-weight: bold;
										font-size: 24rpx;
										color: #FFFFFF;
										background: url(@/static/images/dailyNewspaper/pic4.png) no-repeat;
										background-size: 100% 100%;
									}

									.daily-icon2 {
										width: 104rpx;
										height: 90rpx;
										line-height: 90rpx;
										text-align: center;
										font-weight: bold;
										font-size: 24rpx;
										color: #FFFFFF;
										background: url(@/static/images/dailyNewspaper/pic12.png) no-repeat;
										background-size: 100% 100%;
									}
								}
							}
						}

						.internet-traffic-text {
							margin-top: 24rpx;
							display: flex;
							align-items: center;

							.internet-traffic-text-font {
								margin-left: 60rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #5F6475;
							}

							.internet-traffic-text-font1 {
								min-width: 200rpx;
								font-family: Roboto, Roboto;
								font-weight: bold;
								font-size: 24rpx;
								color: #0CB480;
								// margin-right: 45rpx;

								i {
									font-style: normal;
									font-size: 20rpx;
								}
							}

							.internet-traffic-text-icon {
								width: 24rpx;
								height: 24rpx;
								background: url(@/static/images/dailyNewspaper/icon10-1.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-text-icon1 {
								width: 24rpx;
								height: 24rpx;
								background: url(@/static/images/dailyNewspaper/icon10-4.png) no-repeat;
								background-size: 100% 100%;
							}

							.internet-traffic-text-font2 {
								margin-left: 16rpx;
								font-size: 22rpx;
								color: #FF3B2F;
							}
						}
					}

					.casingHot {
						position: relative;

						.hot {
							position: absolute;
							top: -42rpx;
							right: -25rpx;
							width: 135rpx;
							height: 135rpx;
							background: center url(@/static/images/dailyNewspaper/hot.png) no-repeat;
							background-size: 80% 50%;
						}
					}

				}
			}
		}

		.internet-quality {
			margin-top: 50rpx;
			padding: 0 10rpx;

			.internet-quality-theme {
				width: 100%;
				// background: linear-gradient(to bottom, #FFF9F1, #FFF1DD);
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 10rpx solid #FFCFA5;

				.internet-quality-tilie {
					width: 500rpx;
					height: 80rpx;
					margin: 0 auto;
					background: url(@/static/images/dailyNewspaper/bg3.png) no-repeat;
					background-size: 100% 100%;
					position: relative;
					top: -26rpx;
				}

				.telecom {
					margin-top: 20rpx;
					height: 158rpx;
					padding: 0 46rpx;

					.telecom-count {
						height: 100%;
						background: linear-gradient(180deg, #FFFFFF 0%, #F8EEEC 100%);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 1rpx solid #ECF0F8;

						.count-top {
							margin-top: -20rpx;
							margin-left: 24rpx;
							width: 162rpx;
							height: 61rpx;
							// background: #FFFFFF;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							color: #A7ABBB;
							text-align: center;
						}

						.telecom-count-main {
							width: 100%;
							display: flex;

							.main-item {
								width: 50%;
								height: 78rpx;
								text-align: center;

								.font1 {
									font-size: 28rpx;
									color: #8F8E94;
								}

								.font2 {
									font-family: DIN, DIN;
									font-weight: bold;
									font-size: 36rpx;
									color: #000000;

									span {
										font-weight: 400;
										font-size: 24rpx;
										color: #A7ABBB;
									}
								}
							}
						}
					}
				}

				.load {
					margin: 31rpx 0 38rpx 0;
					padding: 0 55rpx;
					position: relative;

					.load-main {
						.load-main-top {
							overflow: hidden;
							height: 113rpx;
							border-radius: 24rpx 24rpx 0 0;
							display: flex;

							.load-main-top-item {
								width: 50%;
								text-align: center;
								border: 1rpx solid #ECF0F8;
								background: linear-gradient(180deg, #FFFFFF 0%, #F8EEEC 100%);

								.font1 {
									margin-top: 15rpx;
									font-size: 28rpx;
									color: #8F8E94;
								}

								.font2 {
									font-family: DIN, DIN;
									font-weight: bold;
									font-size: 36rpx;
									color: #000000;

									span {
										font-weight: 400;
										font-size: 24rpx;
										color: #A7ABBB;
									}
								}
							}
						}

						.load-main-bottom {
							margin-top: 20rpx;
							border-radius: 0 0 24rpx 24rpx !important;
						}
					}

					.icon {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 102rpx;
						height: 102rpx;
						background: url(@/static/images/dailyNewspaper/icon31.png) no-repeat center;
						background-size: 100%
					}
				}
			}
		}
	}

	.natural-disaster {
		width: 710rpx;
		margin: 40rpx auto 0;
		// background: #fffbf1 url(@/static/images/summaryReport/shuiying.png) no-repeat;
		// background-position: center center;
		background-size: 370rpx 370rpx;
		border: 10rpx #FFCFA5 solid;
		border-radius: 20rpx;
		position: relative;
		padding-bottom: 10rpx;

		.natural-disaster-title {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			background: url(@/static/images/summaryReport/bg/bg20.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: -26rpx;
		}
		.natural-disaster-title2 {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			background: url(@/static/images/summaryReport/bg/bg21.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: -26rpx;
		}

		.paragraph {
			margin: 30rpx 0;
			padding: 0 34rpx 0 29rpx;

			.paragraph-text {
				padding: 39rpx 31rpx 57rpx 31rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #EC3826;
				position: relative;

				line-height: 50rpx;

				.paragraph-bg {
					width: 164rpx;
					height: 76rpx;
					position: absolute;
					top: -40rpx;
					left: -18rpx;
					background: center center url(@/static/images/summaryReport/pic11.png) no-repeat;
					background-size: 100% 100%;
				}

				.paragraph-bg1 {
					width: 164rpx;
					height: 76rpx;
					position: absolute;
					bottom: -30rpx;
					right: -35rpx;
					background: center center url(@/static/images/summaryReport/pic11.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

	}
	.watermark1 {
		background: #fffbf1 center center url(@/static/images/summaryReport/shuiying.png) no-repeat;
		background-size: 370rpx 370rpx;	
	}
	.pageFoot {
		width: 750rpx;
		margin: 20rpx auto;
		display: block;
	}
</style>